<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下拉树插件</title>
    <link href="./../../../static/plugins/select-tree/select-tree.css" rel="stylesheet" />
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>


<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="panel">
                <div class="panel-heading">
                    下拉树插件（select-tree）
                </div>
                <div class="panel-body">
                    <p>单选下拉树</p>
                    <select placeholder="请选择树的内容" id="tree1">
                        <option value=""></option>
                        <option value="1" data-pid="0">一级节点1</option>
                        <option value="1-2" data-pid="1">子节点12</option>
                        <option value="1-2-3" data-pid="1-2">子节点123</option>
                        <option value="1-3" data-pid="1">子节点13</option>
                        <option value="1-3-1" data-pid="1-3">子节点131</option>
                        <option value="1-3-2" data-pid="1-3">子节点132</option>
                        <option value="1-3-3" data-pid="1-3">子节点133</option>
                        <option value="1-3-4" data-pid="1-3">子节点134</option>
                        <option value="1-3-5" data-pid="1-3">子节点135</option>
                        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
                        <option value="2" data-pid="0">一级节点2</option>
                        <option value="3" data-pid="0">一级节点3</option>
                        <option value="2-1" data-pid="2">子节点21</option>
                    </select>
                    <p>多选下拉树</p>
                    <select placeholder="请选择树的内容" id="tree2" multiple>
                        <option value=""></option>
                        <option value="1" data-pid="0">一级节点1</option>
                        <option value="1-2" data-pid="1">子节点12</option>
                        <option value="1-2-3" data-pid="1-2">子节点123</option>
                        <option value="1-3" data-pid="1">子节点13</option>
                        <option value="1-3-1" data-pid="1-3">子节点131</option>
                        <option value="1-3-2" data-pid="1-3">子节点132</option>
                        <option value="1-3-3" data-pid="1-3">子节点133</option>
                        <option value="1-3-4" data-pid="1-3">子节点134</option>
                        <option value="1-3-5" data-pid="1-3">子节点135</option>
                        <option value="1-3-4-1" data-pid="1-3-4">子节点1341</option>
                        <option value="2" data-pid="0">一级节点2</option>
                        <option value="3" data-pid="0">一级节点3</option>
                        <option value="2-1" data-pid="2">子节点21</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript" src="./../../../static/plugins/select-tree/select-tree.js"></script>
    <script>
        $("#tree1,#tree2").selectTree();
    </script>
</body>

</html>